<script>
  import {inject, nextTick, onMounted, onUpdated, ref, watch} from "vue";
  import {useTaskListStore} from "@/pinia/index.js";
  import {useRoute} from "vue-router";
  import {useHead} from '@vueuse/head';

  export default {
    setup() {
      const messageBody = ref({messageType: null, message: {}});
      const fishDialog = ref(false);
      const taskQO = ref({});
      // 注入 WebSocket 实例
      const ws = inject('websocket');
      const totalTime = ref("∞秒");
      const taskListStore = useTaskListStore();
      const route = useRoute();
      const taskTypeName = ref("");
      // 设置标题、图标、主题颜色
      useHead({
        title: () => `WFB·爬塔·${taskTypeName.value}`,
        link: [
          { rel: 'icon', type: 'image/png', href: './assets/fish/fish1.png' }
        ],
        meta: [
          { name: 'theme-color', content: '#b24646' }
        ]
      })

      const getTaskTypeName = () => {
        if (route.params.taskType === "1") {
          return "摸鱼";
        }
        if (route.params.taskType === "2") {
          return "伐木";
        }
        if (route.params.taskType === "3") {
          return "烹饪";
        }
      }

      onMounted(() => {
        messageBody.value.messageType = 3
        messageBody.value.message = route.params.taskType
        ws.value.send(JSON.stringify(messageBody.value))
        taskTypeName.value = getTaskTypeName()
        console.log(taskTypeName.value)
      })

      onUpdated(() => {
        messageBody.value.messageType = 3
        messageBody.value.message = route.params.taskType
        ws.value.send(JSON.stringify(messageBody.value))
        taskTypeName.value = getTaskTypeName()
        console.log(taskTypeName.value)
      })

      const dialogConfirm = (taskIndex, index) => {
        taskListStore.dialogVisible[index] = false
        messageBody.value.messageType = 1
        taskQO.value.taskIndex = taskIndex
        messageBody.value.message = taskQO.value
        ws.value.send(JSON.stringify(messageBody.value))
        taskQO.value.taskIndex = null
        taskQO.value.handlerCount = null
      }

      watch(taskQO, (newValue, oldValue) => {
        nextTick(() => {
          let seconds = newValue.handlerCount * taskListStore.interval
          const days = Math.floor(seconds / 86400);
          const timeStrList = []
          if (days > 0) {
            timeStrList.push(days + "天")
          }
          seconds %= 86400;
          const hours = Math.floor(seconds / 3600);
          if (hours > 0) {
            timeStrList.push(hours + "小时")
          }
          seconds %= 3600;
          const minutes = Math.floor(seconds / 60);
          if (minutes > 0) {
            timeStrList.push(minutes + "分钟")
          }
          const remainingSeconds = seconds % 60;
          if (remainingSeconds > 0) {
            timeStrList.push(remainingSeconds + "秒")
          }
          if (timeStrList.length !== 0) {
            totalTime.value = timeStrList.join("")
          } else if (newValue.handlerCount === 0) {
            totalTime.value = "0秒"
          } else {
            totalTime.value = "∞秒"
          }
        })
      }, {deep: true});

      return {
        fishDialog,
        taskQO,
        totalTime,
        taskListStore,
        dialogConfirm,
      }
    },
  }
</script>

<template>
  <el-row justify="center" align="middle" :gutter="20">
    <el-col :span="3" v-for="(task, index) in taskListStore.taskList" :key="index">
      <div class="click_div" @click="taskListStore.openDialog(index, task.taskInterval)">
        {{task.taskName}}
        <el-image src="/src/assets/fish/fish1.png" height="512" width="512"></el-image>
      </div>
      <el-dialog v-model="taskListStore.dialogVisible[index]" width="380">
        <template #header>
          <div style="text-align: center;">
            {{ task.taskName }}
          </div>
        </template>
        消耗时间：{{task.taskInterval}} 秒/次<br>
        产出物品：<el-tag size="small">1 {{task.outputItemName}}</el-tag><el-tag size="small">{{task.xp}} xp</el-tag><br>
        执行次数：<el-input-number v-model="taskQO.handlerCount" :min="0" controls-position="right" size="small"></el-input-number>
        <el-tag type="warning" style="margin-left: 5px;">注：不填为一直执行</el-tag><br>
        总耗时：{{ totalTime }}<br>
        <template #footer>
          <div style="text-align: center;">
            <el-button @click="taskListStore.dialogVisible[index] = false">取消</el-button>
            <el-button type="primary" @click="dialogConfirm(task.taskIndex, index)">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<style scoped>
  .click_div {
    text-align: center;
    border: 2px black solid;
    border-radius: 5px;
    background-color: #2c2e45;
    color: #f6f5f5;
    cursor: pointer;
  }
  .click_div:hover {
    background-color: #535670;
  }
</style>